<template>
  <div>
    <configForm
      ref="form"
      :style="{'width': column ? '400px':'auto'}"
      :form-items="configs"
      :model="form"
      :rules="rules"
      :column="column"
      size="small"
      :label-width="column ? '130px' : false"
    />
    <el-button type="primary" @click="submit()">提交</el-button>
    <el-button @click="reset()">重置</el-button>
    <el-button @click="edit = !edit">{{ !edit ? '编辑' : '展示' }}</el-button>
  </div>
</template>
<script>
import configForm from '@/components/configForm'
import { makeOptions } from '@/utils/dictionary'
export default {
  name: 'ConfigForm',
  components: {
    configForm
  },
  data() {
    return {
      edit: true,
      column: 1,
      form: {
        myText: '这是数据',
        myDate: '',
        startTime: '',
        endTime: '',
        mySelect: '',
        myInput: '',
        myCode: '',
        myRadio: '1',
        myCheckbox: ['1'],
        mySwitch: true
      },
      rules: {
        myDate: [{
          required: true,
          message: '请选择待联系日期'
        }],
        mySelect: [{
          required: true,
          message: '请选择下拉值'
        }]
      }
    }
  },
  computed: {
    configs() {
      const modelConfig = [
        {
          label: 'Text信息',
          key: 'myText',
          type: 'text',
          mutable: this.edit,
          attrs: {
            class: 'dfdf'
          }
        },
        {
          label: '日期',
          type: 'date',
          key: 'myDate',
          mutable: this.edit,
          attrs: {
            class: 'asd'
          },
          inner: {
            props: {
              format: 'yyyy-MM-dd',
              valueFormat: 'yyyy-MM-dd'
            }
          }
        },
        {
          label: '日期范围',
          key: ['startTime', 'endTime'],
          type: 'date',
          mutable: this.edit,
          inner: {
            props: {
              type: 'daterange',
              clearable: true,
              valueFormat: 'yyyy-MM-dd',
              startPlaceholder: '开始时间',
              endPlaceholder: '结束时间'
            }
          }
        },
        {
          label: '下拉框',
          key: 'mySelect',
          type: 'select',
          mutable: this.edit,
          attrs: {
            class: 'ddddd'
          },
          ext: {
            options: makeOptions('APPLY_STATE')
          }
        },
        {
          label: '手机号码',
          key: 'myInput',
          type: 'input',
          mutable: this.edit,
          validator: 'phone',
          attrs: {
            class: 'dfdf'
          }
        },
        {
          label: '单选框',
          key: 'myRadio',
          type: 'radio',
          mutable: this.edit,
          attrs: {
            class: 'myRadio'
          },
          ext: {
            options: [
              { value: '1', label: '单选框1' },
              { value: '2', label: '单选框2' }
            ]
          }
        },
        {
          label: '多选框',
          key: 'myCheckbox',
          type: 'checkbox',
          mutable: this.edit,
          attrs: {
            class: 'myCheckbox'
          },
          ext: {
            options: [
              { value: '1', label: '多选框1' },
              { value: '2', label: '多选框2' },
              { value: '3', label: '多选框3' }
            ]
          }
        },
        {
          label: '按钮',
          key: 'mySwitch',
          type: 'switch',
          mutable: this.edit,
          attrs: {
            class: 'mySwitch'
          }
        },
        {
          label: '自定义slot内容',
          key: 'myCode',
          mutable: this.edit,
          slot: () => {
            return this.edit ? (
              <div>
                <el-input
                  placeholder={`请填写内容`}
                  value={this.form.myCode}
                  onInput={val => {
                    this.$set(this.form, 'myCode', val)
                  }}
                >
                </el-input>
              </div>
            ) : this.form.myCode
          },
          vIf: [{ key: 'mySwitch', value: true }]
        }
      ]
      return modelConfig
    }
  },
  methods: {
    submit() {
      this.$refs.form.formSubmit().then((valid) => {
        if (valid) {
          console.log('form', this.form)
          setTimeout(() => {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset() {
      this.$refs.form.$refs.form.resetFields()
      // 解决因为隐藏展示items后无法清空数据
      this.$set(this.form, 'myCode', '')
    }
  }
}
</script>
